<template>
  <div class="page">
    <FCPage direction="column">
      <FCLayout class="backgroundColor marginBottom">
        <FCForm
          ref="form"
          v-bind="queryForm"
          :dataset="ds1"
          :collapseForm="collapseForm"
          :controls="formControls"
        >
          <template v-slot:abc>
            <MyControl :a="a" :b="b" @click="click"></MyControl>
          </template>
          <template v-slot:addressDemo>
            <AddressDemo :a="a" :b="b" @click="click"></AddressDemo>
          </template>
        </FCForm>
      </FCLayout>
      <FCPage direction="column" class="backgroundColor marginBottom">
        <FCLayout>
          <!-- <FCTable
            :scroll="{ x: '100%' }"
            :fields="queryFields"
            :dataset="ds1"
            shouldPagination
          ></FCTable> -->
          <a-table>
                        
          </a-table> 
        </FCLayout>
      </FCPage>
    </FCPage>
  </div>
</template>

<script>
import FCPage from '@/layouts/FCPage.vue'
import FCLayout from '@/layouts/FCLayout.vue'
import FCTab from '@/vendors/fc-ui/src/controls/FCTab.vue'
import FCForm from '@/vendors/fc-ui/src/form/FCForm.vue'
import FCTable from '@/vendors/fc-ui/src/table/FCTable.vue'
import FCButton from '@/vendors/fc-ui/src/controls/FCButton.vue'
import FCSelect from '@/vendors/fc-ui/src/controls/FCSelect.vue'
import FCInput from '@/vendors/fc-ui/src/controls/FCInput.vue'
import FCDatePicker from '@/vendors/fc-ui/src/controls/FCDatePicker.vue'
import FCInputNumber from '@/vendors/fc-ui/src/controls/FCInputNumber.vue'
import modalA from './modalA.vue'
import MyControl from './MyControl.vue'
import modalLink from './modalLink.vue'
import FCDataset from '@/vendors/fc-dataset/FCDataset'
import AddressDemo from './AddressDemo.vue'
import {
  getCounterPaymentData,
  getProvince,
  getCity,
  getArea,
} from '@/apis/centralizedPaymentApi'

export default {
  name: 'fcTest',
  components: {
    FCTab,
    FCForm,
    FCButton,
    FCTable,
    FCSelect,
    FCInput,
    FCInputNumber,
    FCDatePicker,
    FCPage,
    FCLayout,
    modalLink,
    MyControl,
    AddressDemo,
  },

  data() {
    const ds1 = new FCDataset({
      fields: [
        { name: 'text', type: 'string' },
        { name: 'input', type: 'string' },
        { name: 'inputNumber', type: 'Number' },
        { name: 'select', type: 'string' },
        { name: 'selectTable', type: 'string' },
        { name: 'selectModal', type: 'string' },
        { name: 'radioGroup', type: 'string' },
        { name: 'checkbox', type: 'Boolean' },
        { name: 'checkboxGroup', type: 'string' },
        { name: 'datePicker', type: 'string' },
        { name: 'dateRangePicker', type: 'string' },
        { name: 'textArea', type: 'string' },
        { name: 'province', type: 'String' },
        { name: 'city', type: 'String' },
        { name: 'area', type: 'String' },
        { name: 'address', type: 'String' },
      ],
      datas: [{ text: 'text1' }, { text: 'text2' }],
    })
    const that =this
    return {
      a: '1',
      b: '2',
      ds1,
      queryForm: {
        cols: 4, //每行布局几列
        labelCol: 8,
        wrapperCol: 16,
        labelAlign: 'right', //对齐方式
        fields: [
          {
            name: 'text',
            title: 'text',
            controlType: 'text',
          },
          {
            name: 'input',
            title: 'input',
            controlType: 'input',
          },
          {
            name: 'inputNumber',
            title: 'inputNumber',
            controlType: 'inputNumber',
          },
          {
            name: 'select',
            title: 'select',
            controlType: 'select',
            controlProps: {
              optionsApi: async () => {
                return [
                  { value: '3010100', label: '上海分公司' },
                  { value: '2010100', label: '江苏分公司' },
                  { value: '1010100', label: '浙江分公司' },
                ]
              },
            },
          },
          {
            name: 'selectTable',
            title: 'selectTable',
            controlType: 'selectTable',
            controlProps: {
              tableProps: {
                fields: [
                  {
                    name: 'code',
                    title: '币种代码',
                  },
                  {
                    name: 'name',
                    title: '币种名称',
                  },
                ],
              },
              optionsLabel: 'name',
              optionsValue: 'code',
              optionsApi: async () => {
                return [
                  { code: '01', name: '人民币' },
                  { code: '02', name: '美元' },
                  { code: '03', name: '港元' },
                ]
              },
            },
          },
          {
            name: 'selectModal',
            title: 'selectModal',
            controlType: 'selectModal',
            controlProps: {
              modal: modalA,
              optionsLabel: 'classescodename',
              optionsValue: 'classescode',
              modalProps: {
                title: '选择险种',
                width: 800,
              },
            },
          },
          {
            name: 'radioGroup',
            title: 'radioGroup',
            controlType: 'radioGroup',
            controlProps: {
              options: [
                { value: '1', label: 'label 1' },
                { value: '2', label: 'label 2' },
              ],
            },
          },
          {
            name: 'checkbox',
            title: 'checkbox',
            controlType: 'checkbox',
          },
          {
            name: 'checkboxGroup',
            title: 'checkboxGroup',
            controlType: 'checkboxGroup',
            controlProps: {
              optionsApi: async () => {
                return [
                  { value: '1', label: 'label 1' },
                  { value: '2', label: 'label 2' },
                ]
              },
            },
          },
          {
            name: 'datePicker',
            title: 'datePicker',
            controlType: 'datePicker',
          },
          {
            name: 'dateRangePicker',
            title: 'dateRangePicker',
            controlType: 'dateRangePicker',
          },
          {
            name: 'textArea',
            title: 'textArea',
            controlType: 'textArea',
            controlProps: {
              rows: 1,
            },
          },
          {
            name: 'test1',
            title: 'custom测试(引用组件)',
            span: 24,
            labelCol: 3,
            wrapperCol: 21,
            customRender: () => {
              return {
                template: MyControl,
                props: {
                  a: this.a,
                  b: this.b,
                },
                on: {
                  click2: ({ a, b }) => {
                    alert(that.a)
                    // this.click({ a, b })
                  },
                  click: function({ a, b }) {
                    alert(that.a)
                    // this.click({ a, b })
                  },
                },
              }
            },
          },
          {
            name: 'test2',
            title: 'custom测试(使用插槽)',
            span: 24,
            labelCol: 3,
            wrapperCol: 21,
            customRender: 'abc',
          },
          {
            name: 'test3',
            title: 'custom测试(引用组件)',
            span: 24,
            labelCol: 3,
            wrapperCol: 21,
            customRender: () => {
              return {
                template: AddressDemo,
              }
            },
          },
          {
            name: 'test4',
            title: 'custom测试(使用插槽)',
            span: 24,
            labelCol: 3,
            wrapperCol: 21,
            customRender: 'addressDemo',
          },
        ],
      },
      data: {},
      loadingTable: false,
      loadingTable1: false,
      loadingSubmit: false,
      collapseForm: false,
      collapseForm1: false,
      queryFields: [
        {
          title: 'text',
          name: 'text',
          width: 100,
          ellipsis: true,
          controlType: 'text',
        },
        {
          title: 'input',
          name: 'input',
          width: 200,
          ellipsis: true,
          controlType: 'input',
        },
        {
          title: 'inputNumber',
          name: 'inputNumber',
          width: 200,
          ellipsis: true,
          controlType: 'inputNumber',
        },
        {
          title: 'select',
          name: 'select',
          width: 200,
          ellipsis: true,
          controlType: 'select',
          controlProps: {
            optionsApi: async () => {
              return [
                { value: '3010100', label: '上海分公司' },
                { value: '2010100', label: '江苏分公司' },
                { value: '1010100', label: '浙江分公司' },
              ]
            },
          },
        },
        {
          title: 'selectTable',
          name: 'selectTable',
          width: 200,
          ellipsis: true,
          controlType: 'selectTable',
          controlProps: {
            tableProps: {
              fields: [
                {
                  name: 'code',
                  title: '币种代码',
                },
                {
                  name: 'name',
                  title: '币种名称',
                },
              ],
            },
            optionsLabel: 'name',
            optionsValue: 'code',
            optionsApi: async () => {
              return [
                { code: '01', name: '人民币' },
                { code: '02', name: '美元' },
                { code: '03', name: '港元' },
              ]
            },
          },
        },
        {
          title: 'selectModal',
          name: 'selectModal',
          width: 200,
          ellipsis: true,
          controlType: 'selectModal',
          controlProps: {
            modal: modalA,
            optionsLabel: 'classescodename',
            optionsValue: 'classescode',
            modalProps: {
              title: '选择险种',
              width: 800,
            },
          },
        },
        {
          title: 'radioGroup',
          name: 'radioGroup',
          width: 200,
          ellipsis: true,
          controlType: 'radioGroup',
          controlProps: {
            options: [
              { value: '1', label: 'label 1' },
              { value: '2', label: 'label 2' },
            ],
          },
        },
        {
          title: 'checkbox',
          name: 'checkbox',
          width: 200,
          ellipsis: true,
          controlType: 'checkbox',
        },
        {
          title: 'checkboxGroup',
          name: 'checkboxGroup',
          width: 200,
          ellipsis: true,
          controlType: 'checkboxGroup',
          controlProps: {
            optionsApi: async () => {
              return [
                { value: '1', label: 'label 1' },
                { value: '2', label: 'label 2' },
              ]
            },
          },
        },
        {
          title: 'datePicker',
          name: 'datePicker',
          width: 200,
          ellipsis: true,
          controlType: 'datePicker',
        },
        {
          title: 'dateRangePicker',
          name: 'dateRangePicker',
          width: 200,
          ellipsis: true,
          controlType: 'dateRangePicker',
        },
        {
          title: 'textArea',
          name: 'textArea',
          width: 200,
          ellipsis: true,
          controlType: 'textArea',
          controlProps: {
            rows: 1,
          },
        },
      ],
      selectRows: [],
      selectRows1: [],
      selectedRowKeys: [],
      selectedRowKeys1: [],
      value: '1',
      index: 0,
      submitRows: [],
      // submitRows: [],
      formData: {},
      visible: false,
      currentRecord: {},
      //省
      province: undefined,
      //市
      city: undefined,
      //区
      area: undefined,
      cityOptions: [],
      areaOptions: [],
      address: '',
      cityLoading: false,
      areaLoading: false,
      testValue: '',
      datePicker: null,
      colValue:['A1003', 'A1004'],
    }
  },
  computed: {
    formControls() {
      return [
        {
          title: '获取数据',
          buttonType: 'primary',
          onClick: () => {
            this.getValues()
          },
        },
        {
          title: '重置',
          onClick: () => {
            this.reset()
          },
        },
        {
          title: this.collapseForm ? '展开' : '收起',
          buttonType: 'link',
          onClick: () => {
            this.collapseForm = !this.collapseForm
          },
        },
      ]
    },
  },
  created() {},
  methods: {
    getValues() {
      console.log('getRecord:', this.ds1.getRecord())
    },
    //重置
    reset() {
      this.$refs.form.resetFields()
    },
    click(obj) {
      alert(this.a+'a:' + obj.a + 'b:' + obj.b)
    },
  },
}
</script>

<style scoped lang="less">
.totalInfo {
  width: auto;
  position: absolute;
  bottom: 40px;
}
</style>
